<template>
  <div class="content-width content-width-min">
    <Label :tag="7"></Label>
    <div class="VideoContainer">
      <div class="video" v-for="item in VideoList" :key="item.id">
        <div
          style="width: 224px; height: 125px; position: relative"
          class="img"
        >
          <img v-lazyload="item.cover[0]" width="224" height="125" alt="" />
          <el-image
            lazy
            style="width: 30px; position: absolute; left: 10px"
            src="//rs.dance365.com/img/release_play@3x.fb313c4d.png"
            alt="here is play btn icon"
            class="play_icon"
          />
        </div>
        <!--   视频信息    -->
        <div class="moment_detail" style="border-radius: 500px">
          <div class="card_detail">
            <div :title="item.title" class="title" style="cursor: pointer">
              <div class="example" style="width: 224px; padding-top: 10px">
                <span>
                  {{ item.title }}
                </span>
              </div>
            </div>
            <div class="viewCount" style="margin: 15px 0 0 0px">
              <div class="price" style="color: #f93684; line-height: 14px">
                <div style="font-size: 16px">
                  ￥{{ item.moreBackup.actualPrice }}
                </div>
              </div>
              <span
                style="font-size: 12px; color: #d8dbe6; margin-right: 5px"
                class="num"
              >
                {{ item.statisticsBackup.viewCount }}人浏览
              </span>
            </div>

            <div
              style="
                display: flex;
                width: 180px;
                justify-content: space-between;
                position: relative;
              "
            >
              <div class="vip_free_icon"></div>
              <span style="font-size: 12px; color: #d8dbe6" class="num">
                点赞{{ item.statisticsBackup.praiseCount }}
              </span>
              <span style="font-size: 12px; color: #d8dbe6" class="num">
                评论{{ item.statisticsBackup.commentCount }}
              </span>
              <span style="font-size: 12px; color: #d8dbe6" class="num">
                收藏{{ item.statisticsBackup.favoriteCount }}
              </span>
            </div>
          </div>
        </div>
        <!--   视频的用户信息    -->
        <div class="creator_info" style="margin-top: 2px">
          <div
            style="
              height: 40px;
              line-height: 40px;
              padding-top: 20px;
              position: relative;
            "
          >
            <img
              width="30"
              height="30"
              style="border-radius: 50%; margin-left: -234px"
              :src="item.creatorBackup.avatar"
            />
            <span
              style="
                display: inline-block;
                position: absolute;
                top: 16px;
                left: 45px;
              "
              >{{ item.creatorBackup.name.slice(1, 6) }}</span
            >
            <span
              style="
                display: inline-block;
                position: absolute;
                top: 16px;
                left: 160px;
              "
              >11-17</span
            >
          </div>
        </div>
      </div>
      <div class="isLoad">
        <el-button @click="loadMode" v-show="isLoading">加载更多</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "LiveCourses",
});
</script>

<script lang="ts" setup>
import Label from "@/components/Label/index.vue";
import { onMounted, onUnmounted, ref } from "vue";
import { reqGetVideoAsync } from "@/api/home";
import { throttle } from "lodash";
import { reqVipZoneIntegrated } from "@/api/discovery";
// 视频数据
const VideoList = ref<any>([]);
// 条数
const pageSize = ref<number>(10);
// const videoList = ref([])
//请求推荐列表数据的函数
const getVideoList = async (pageSize: number, pageNum: number) => {
  const result = await reqVipZoneIntegrated(pageSize, pageNum);
  // console.log(result);
  VideoList.value = result.content.content;
  // console.log(VideoList.value, 369);
};
onMounted(async () => {
  await getVideoList(20, 0);
});

const pageNum = ref<number>(0);
// 控制显示隐藏 加载更多按钮
let isLoading = ref<Boolean>(false);

// 监听页面到底部的回调
const scrollBottom = async () => {
  // console.log(pageNum.value);
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  let clientHeight = document.documentElement.clientHeight;
  let scrollHeight = document.documentElement.scrollHeight;
  if (scrollTop + clientHeight >= scrollHeight) {
    // console.log("到底啦");
    isLoading.value = true;
    pageNum.value = pageNum.value + 1;
    if (pageNum.value < 2) {
      const re = await reqGetVideoAsync(pageNum.value);
      VideoList.value = [...VideoList.value, ...re.data.content];
      isLoading.value = false;
    }
  }
};
// 初始化调用
onMounted(() => {
  window.addEventListener("scroll", throttle(scrollBottom, 300));
});
// 离开时销毁
onUnmounted(() => {
  window.removeEventListener("scroll", scrollBottom); //页面离开后销毁监听事件
});
// 点击获取更多
const loadMode = async () => {
  // loading.value = true
  // pageNum.value= pageNum.value+1
  const re = await reqGetVideoAsync(pageNum.value);
  VideoList.value = [...VideoList.value, ...re.data.content];
  isLoading.value = false;
};
// 加载中
// const loading = ref(true)
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `;
</script>

<style lang="scss" scoped>
.content-width-min {
  min-width: 1200px;
}
.content-width {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.VideoContainer {
  width: 1200px;
  margin: 0px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #f5f7f9;
}
.video {
  width: 224px;
  height: 288px;
  margin-top: 20px;
  //background-color: pink;
  margin-bottom: 10px;
}
.play_icon {
  margin: 90px 160px 0 0;
}
.card_detail {
  background-color: #fff;
}
.creator_info {
  height: 68px;
  border-radius: 4%;
  background-color: #fff;
}
span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.isLoad {
  width: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.viewCount {
  height: 32px;
  line-height: 22px;
  padding-bottom: 7px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
.vip_free_icon {
  display: block;
  position: absolute;
  left: 0;
  top: -12px;
  display: inline-block;
  width: 38px;
  height: 14px;
  background: url(https://rs.dance365.com/vip_free@3x.png);
  background-size: cover;
}
</style>
